<template>
  <div>
    <Card>
			<Modal v-model="set" title="角色设置" @on-ok="saveRoleMenu">
				<div class="form-div" v-for="item in menuList" :key="item.mid">
					<div>
						<label class="form-label">父级菜单</label>
						<i-switch size="large" v-model="item.checked" @on-change="showId(item)">
							<span slot="open">启用</span>
							<span slot="close">关闭</span>
						</i-switch>
						{{item.title}}
						<div class="role-menu-box" v-if="item.child.length != 0">
							<label class="form-label">子级菜单</label>
							<div class="set-menu-box">
								<div class="set-menu-checkbox" v-for="item1 in item.child" :key="item1.name">
									<input type="checkbox" v-model="item1.checked" :disabled="!item.checked">{{item1.title}}
								</div>
							</div>
						</div>
					</div>
				</div>
      </Modal>
			<Modal
				v-model="newRole"
				title="创建新角色"
				@on-ok="creat">
				<div class="form-div">
					<label>新角色名称</label>
					<Input v-model="roleName" placeholder="请输入新角色" style="width: 200px" />
				</div>
			</Modal>
			<Modal v-model="deleModal" title="删除角色" @on-ok="deleRole">
				是否删除该角色？
			</Modal>
			<div class="form-div">
				<Button style="margin: 10px 0;"  type="primary" @click="newRole = true">创建新角色</Button>
			</div>
			<Table :columns="columns" :data="tableData"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count"  show-elevator show-total :page-size ="pageSize" :current="page" @on-change="handlePage"/>
				</div>
			</div>
    </Card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
					title: '序号',
					key: 'rid'
				},
        {
					title: '角色名称',
					key: 'roleName'
				},
				{
          title: '操作',
          key: 'handle',
          render: (h, params) => {
						return h('div', [
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												this.set = true
												this.roleId = params.row.rid
												this.roleMenuIds = []
												this.selectedMenuIds = []
												this.$api.get(0, '/usr/v2/menu/tree', {}, r => {
													this.menuList = r.data.data
													for (var i = 0; i < this.menuList.length; i++) {
														this.$set(this.menuList[i], 'checked', false)
														if (this.menuList[i].child.length !== 0) {
															for (var a = 0; a < this.menuList[i].child.length; a++) {
																this.$set(this.menuList[i].child[a], 'checked', false)
															}
														}
													}
													this.$api.get(0, '/usr/v2/menu/role?rId=' + params.row.rid, {}, r => {
														console.log(r.data.data)
														if (r.data.data.length !== 0) {
															for (var i = 0; i < r.data.data.length; i++) {
																this.selectedMenuIds.push(r.data.data[i].mid)
																if (r.data.data[i].child.length !== 0) {
																	for (var a = 0; a < r.data.data[i].child.length; a++) {
																		this.selectedMenuIds.push(r.data.data[i].child[a].mid)
																	}
																}
															}
															for (var b = 0; b < this.menuList.length; b++) {
																if (this.selectedMenuIds.indexOf(this.menuList[b].mid) !== -1) {
																	this.menuList[b].checked = true
																}
																if (this.menuList[b].child.length !== 0) {
																	for (var c = 0; c < this.menuList[b].child.length; c++) {
																		if (this.selectedMenuIds.indexOf(this.menuList[b].child[c].mid) !== -1) {
																			this.menuList[b].child[c].checked = true
																		}
																	}
																}
															}
														}
													})
												})
											}
									}
							}, '设置'),
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												this.deleModal = true
												this.deleRoleId = params.row.rid
											}
									}
							}, '删除')
						])
					}
        }
      ],
      tableData: [],
			set: false,
			count: 0,
			pageSize: 5,
			page: 1,
			newRole: false,
			roleName: '',
			roleData: [],
			menuList: [],
			selectedMenuIds: [],
			roleMenuIds: [],
			roleId: '',
			setMenu: {},
			deleModal: false,
			deleRoleId: 0
    }
  },
  methods: {
		saveRoleMenu () {
			// 循环数组获取勾选的菜单id
			for (var i = 0; i < this.menuList.length; i++) {
				if (this.menuList[i].checked === true) {
					this.roleMenuIds.push(this.menuList[i].mid)
					if (this.menuList[i].child.length !== 0) {
						for (var a = 0; a < this.menuList[i].child.length; a++) {
							if (this.menuList[i].child[a].checked === true) {
								this.roleMenuIds.push(this.menuList[i].child[a].mid)
							}
						}
					}
				}
			}
			// 保存数据
			this.$api.put(0, '/usr/v2/roleMenu/list', {rId: this.roleId,	mId: this.roleMenuIds.join()}, r => {
				if (r.data.code === 0) {
					this.$Message.success('修改成功')
				}
			})
		},
		// 分页跳转
		handlePage (value) {
			console.log(value)
			this.page = value
			this.getList()
		},
		// 创建角色
		creat () {
			if (this.roleData.indexOf(this.roleName) === -1) {
				this.$api.post(0, '/usr/v2/role', {roleName: this.roleName}, r => {
					this.$Message.success('创建成功')
					this.getList()
				})
			} else {
				this.$Message.error('该角色已经存在')
			}
		},
		// 获取父菜单列表
		isParent () {
			this.$api.post(0, '/auth/menu/getMenuParentNode', {main_menu: 1}, r => {
				this.parentList = r.data.data
			})
		},
		// 父菜单关闭，所属子菜单全部关闭
		showId (index) {
			if (index.checked === false) {
				for (var i = 0; i < index.child.length; i++) {
					index.child[i].checked = false
				}
			}
		},
		// 获取角色列表
		getList () {
			this.$api.get(0, '/usr/v2/role/page?page=' + this.page + '&limit=5', {}, r => {
				if (r.data.code === 0) {
					this.tableData = r.data.data.data
					this.count = parseInt(r.data.data.total)
				}
			})
		},
		deleRole () {
			this.$api.delete(0, '/usr/v2/role?id=' + this.deleRoleId, {}, r => {
				if (r.data.code === 0) {
					this.$Message.success('删除成功')
					this.page = 1
					this.getList()
				} else {
					this.$Message.error('删除失败')
				}
			})
		}
  },
  mounted () {
		this.getList()
		this.$api.get(0, '/usr/v2/role/page?page=' + this.page + '&limit=9999999', {}, r => {
			if (r.data.code === 0) {
				for (var i = 0; i < r.data.data.data.length; i++) {
					this.roleData.push(r.data.data.data[i].authority)
				}
			}
		})
  }
}
</script>

<style>
  ul.ivu-page{
		margin-top:20px
	}
	div.form-div{
		margin-bottom:15px;
	}
	label.form-label{
		display:inline-block;
		width:100px;
		text-align: right;
		margin-right:15px
	}
	.role-menu-box{
		margin-top:15px;
	}
	.role-menu-box label.form-label{
		float:left;
	}
	.role-menu-box:after{
		content: "";
		display: block;
		clear: both;
	}
	.role-menu-box .ivu-checkbox-group-item{
		margin:0 10px 10px
	}
	.set-menu-box{
		margin-left:115px
	}
	.set-menu-checkbox{
		display:inline-block;
		margin:0 10px 10px 0
	}
	.set-menu-checkbox input{
		position:relative;
		top:2px;
		margin-right:2px
	}
</style>
